<script setup lang="ts">
import StagePoints from './StagePoints.vue'
import SvgEl from './svg/SvgEl.vue'
import StageMenu from './StageMenu.vue';
import { useStage } from '../store/stage'
import { onMounted, onUnmounted, ref } from 'vue';
import { deleteCurrentObject } from '@/objects/stagaeUtils';
import { StageObject, SvgObject } from '@/objects/StageObject';
import ColorPicker from './form/ColorPicker.vue';

const stage = useStage()
const showColorPicker = ref(false)
const multipleRect = stage.mouse.multipleRect
function box_mouseup() {
    if (stage.mouse.down) {
        stage.stopMoveElement();
        stage.mouse.down = false;
        
    }

    if (stage.mouse.multiple) {
        stage.mouse.multiple = false;
        stage.mouse.multipleRect.w = 0;
        stage.mouse.multipleRect.h = 0;
        if (stage.currentObject.elements.length > 0) {
            //菜单
            stage.menus.x = stage.mouse.x;
            stage.menus.y = stage.mouse.y;
            stage.menus.show = true;
        }

    }
}


function mousemove(e: MouseEvent) {
    if (stage.mouse.down) {
        //移动元素
        stage.moveElement(e.offsetX, e.offsetY);
        return
    }
    if (stage.mouse.multiple) {
        //多选
        multipleRect.w = e.offsetX - stage.mouse.x - 6;
        multipleRect.h = e.offsetY - stage.mouse.y - 6;

        stage.chooseAllElement();
    }
}
function onkeydown(e: KeyboardEvent) {
    switch (e.key.toLowerCase()) {
        case 'delete':
            deleteCurrentObject(stage.currentObject.element as StageObject, stage.data.elements as SvgObject, stage.mouse.arg);
            stage.currentObject.element = null;
            stage.mouse.arg = null;
            stage.mouse.curElType = 0;
            break
    }
}

const setBgColor = (color: string) => {
    stage.data.elements.background.value = color;
}

onMounted(() => {
    window.addEventListener('keydown', onkeydown);
})
onUnmounted(() => {
    window.removeEventListener('keydown', onkeydown);
})
</script>
<template>
    <div class="stage-warp" @mousemove="mousemove" @mouseup="box_mouseup">
        <div class="svg-box">
            <SvgEl />
            <StagePoints />
            <StageMenu />
            <div class="multiple-rect" v-show="stage.mouse.multiple"
                :style="{ left: multipleRect.x + 'px', top: multipleRect.y + 'px', width: multipleRect.w + 'px', height: multipleRect.h + 'px' }">
            </div>
        </div>
        <div class="stage-tools">
            <div>
                <span>
                    背景
                </span>
                <span class="bg-color" :style="{'background-color':stage.data.elements.background.value}" @click="showColorPicker = true"></span>
            </div>
            <div>
                <span>
                    缩放
                </span>
                <input class="scale-input" v-model="stage.data.scale" type="number" name="scale" step="0.1" min="0.1"
                    max="10" />
            </div>
        </div>
        <ColorPicker :show-color="showColorPicker" :cur-color="stage.data.elements.background.value"
            @set-color-val="setBgColor" @close-picker="showColorPicker = false" />
    </div>
</template>
<style scoped>
.stage-warp {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.5rem;
    margin: 0 0.1rem;
    overflow: auto;
    position: relative;
}

.svg-box {
    position: relative;
}

.multiple-rect {
    position: absolute;
    left: 0;
    top: 0;
    border: dashed 1px #ff3a3a;
}

.stage-tools {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.5rem;
    font-size: 0.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    border-top-left-radius: 1rem;
}

.bg-color {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-block;
    border: solid 1px #fff;
    margin-left: 0.5rem;
    vertical-align: middle
}

.scale-input {
    width: 3rem;
}
</style>